<template>
<div>
  <p class="title">{{detail.title}}</p>
  <p class="author">{{detail.author}} &nbsp; <span>{{detail.updateTime}}</span></p>
  <div v-html="detail.content"></div>
  <p><img width="50%" :src="detail.pic" /></p>
</div>
</template>

<script>
export default {
  // 校验参数 若无效停止渲染当前页面并显示错误页面
  validate({ params, query }) {
    return /^[0-9]+(\.[0-9]+)?$/.test(params.id) 
  },
  data () {
    return {
      detail: {}
    }
  },
  head() {
    return {
      title: '文章列表-' + this.detail.title,
      meta: [
        { hid: 'description', name: 'description', content: this.detail.content },
        { hid: 'keywords', name: 'keywords', content: this.detail.author }
      ]
    }
  },
  // asyncData限于页面组件使用
  async asyncData(txt) {
    const res = await txt.$api.articleDetail(txt.params.id)
    let detail = []
    if(res.code === 200) {
      detail = res.data
    }
    return { detail }
  }
}
</script>

<style lang="scss" scoped>
  .title{
    font-size: 30px;
    font-weight: bold;
  }
  .author{
    margin: 5px 0 20px 0;
  }
</style>
